<template>
	<loading-wait v-if="loading" ></loading-wait>
	<view class="uni-global-box">
		<view class="uni-global-title">
			订单管理 / 订单列表
		</view>
		<view class="">
			<view class="class-manage-top">
				<view class=""> 
					<search-input placeholder="输入订单号搜索" v-model="keyword" @onclick="onSearch" ></search-input>
				</view>
				
			</view>
			<u-table class="u-table-senior">
				<u-tr style="margin-right:15px;" class="sticky-table-th" >
					<u-th class="u-table-th " width="70px">
						技师头像
					</u-th>
					<u-th class="u-table-th " width="150px">
						项目服务
					</u-th>
					<u-th class="u-table-th " width="80px">
						时长
					</u-th>
					<u-th class="u-table-th " width="80px">
						项目价格
					</u-th>
					<u-th class="u-table-th " width="200px">
						技师信息
					</u-th>
					
					<u-th class="u-table-th " width="180px">
						订单号
					</u-th>
					<u-th class="u-table-th " width="200px">
						用户信息
					</u-th>
					<u-th class="u-table-th " width="250px">
						用户地址
					</u-th>
					<u-th class="u-table-th " width="200px">
						店铺信息
					</u-th>
					<u-th class="u-table-th " width="150px">
						车费
					</u-th>
					<u-th class="u-table-th " width="150px">
						支付类型
					</u-th>
					<u-th class="u-table-th " width="150px">
						预约到达时间
					</u-th>
					<u-th class="u-table-th " width="150px">
						备注
					</u-th>
					
					<u-th class="u-table-th sticky-right sticky-shadow" :style="`right:${80+150}px`" width="100px">
						订单状态
					</u-th>
					<u-th class="u-table-th sticky-right " style="right:80px" width="150px">
						创建时间
					</u-th>
					<u-th  width="80px" class="u-table-th sticky-right " >操作</u-th>
				</u-tr>
				<u-empty text="暂无订单" mode="order" v-if="nullData" ></u-empty>
				<loaders v-if="data==0 && !nullData"></loaders>
				<u-tr v-for="(item,index) in data" :key="index" class="u-table-tr">
					<u-td class="u-table-td" width="70px">
						<view class="flex-layout">
							<u-image width="60px" height="60px" :src="item.technician.head_image"
								@click="eventImage(item.technician.head_image)"></u-image>
						</view>
					</u-td>
					<u-td class="u-table-td" width="150px">
						{{item.item.title}}
					</u-td>
					<u-td class="u-table-td" width="80px">
						{{item.item.time}}ms
					</u-td>
					<u-td class="u-table-td" width="80px">
						<view class="uni-global-price">
							￥{{(item.item.price / 100).toFixed(2)}}
						</view>
					</u-td>
					<u-td class="u-table-td" width="200px">
						{{item.technician.name}}-{{item.technician.mobile}}
					</u-td>
					<u-td class="u-table-td" width="180px">
						<heightText :textContetn="item.order_no" :textTitle="keyword" ></heightText>
					</u-td>
					<u-td class="u-table-td" width="200px">
						{{item.address.name}}-{{item.address.mobile}}
					</u-td>
					<u-td class="u-table-td" width="250px">
						{{item.address.address_name}}-{{item.address.address}}
					</u-td>
					<u-td class="u-table-td" width="200px">
						{{item.shop?item.shop.title:'无店铺'}}
					</u-td>
					<u-td class="u-table-td" width="150px">
						<view class="uni-global-price">
							￥{{(item.fare / 100).toFixed(2)}}
						</view>
					</u-td>
					<u-td class="u-table-td" width="150px">
						{{item.pay.text}}
					</u-td>
					<u-td class="u-table-td" width="150px">
						{{item.arrival_time.time}}
					</u-td>
					<u-td class="u-table-td" width="150px">
						{{item.notes || '暂无备注'}}
					</u-td>
					<u-td class="u-table-td sticky-right sticky-shadow" :style="`right:${80+150}px`" width="100px">
						<view :style="`color:${onStatusColor(item.status[item.status.length-1].value)};`" class="uni-global-pointer" @click="onOrderStatus(item.status)">
							{{item.status[item.status.length-1].text}}
						</view>
					</u-td>
					<u-td class="u-table-td sticky-right " style="right:80px"  width="150px">
						<uni-dateformat :date="item.create_date"></uni-dateformat>
					</u-td>
					<u-td class="u-table-td sticky-right "  width="80px" >
						<view class="u-table-td-util">
							<u-button size="mini" @click="goUrl('./detail?uid='+item._id)" type="primary" >
								<text class="iconfont icon-chakan"></text>
								<text>详情</text>
							</u-button>
						</view>
				
					</u-td>
				</u-tr>
			</u-table>
			<view class="u-table-senior-pagination">
				<uni-pagination @change="enventPages" :total="count"></uni-pagination>
			</view>
		</view>


	</view>
	<u-toast ref="uToast" />
	<u-popup v-model="showStatusOrder" closeable mode="center" border-radius="10"  >
		<view class="uni-popup-box" style="width: 400px;padding:30px;" >
			<!-- <u-steps :list="numList" :current="(numList.length==4?4: numList.length-2)" mode="number" direction="column" ></u-steps> -->
			<u-time-line>
				<u-time-line-item v-for="(item,index) in numList" :key="index">
					<template v-slot:node v-if="(numList.length-1)==index" >
						<view class="u-node" style="background: #23b7e5;">
							<u-icon name="pushpin-fill" color="#fff" :size="35"></u-icon>
						</view>
					</template>
					<template v-slot:content>
						<view>
							<view class="" :style="`color:${onStatusColor(item.value)};`">
								{{item.text}}
							</view>
							<view class="u-order-time">
								<uni-dateformat :date="item.create_time"></uni-dateformat>
							</view>
						</view>
					</template>
				</u-time-line-item>
			
			</u-time-line>
		</view>
	</u-popup>
</template>

<script>
	import {onStatusColor} from "/common/js_file/user-list.js" ;
	const global = uniCloud.importObject("global",{customUI:true});
	export default {
		data() {
			return {
				loading:false,
				nullData:false,
				data: [],
				where: {},
				// 分页
				limit:10,
				skip:0,
				count:0,
				showStatusOrder:false,// 状态弹出框
				keyword:'',// 关键词搜索
				numList:[],
			}
		},
		onLoad() {
			this.getData();
		},
		methods: {
			getData() {
				this.nullData = false;
				const filed = "_id,technician,userinfo,address,shop,arrival_time,item,order_no,fare,notes,status,is_pay,pay,create_date,last_status,timeout_time,create_ip";
				global.getList('orders',this.where,"create_date desc", filed,this.skip,this.limit).then(result => {
					const data = result.data ;
					this.count = result.count;
					this.data = data;
					this.loading = false;
					if(  data.length==0 )return this.nullData = true;
				})
			},
			// 搜索
			onSearch(){
				this.loading = true;
				const nameVal = this.keyword
				// 合并查询条件
				let MergeWhere = {};
				// 构建搜索条件
				let search = {
					$or: [
						{ 	'order_no': {$regex: '.*' + nameVal + '.*',$options: 'i'} 		}
					]
				};
				this.where = Object.assign(MergeWhere, search) ;
				this.getData();
			},
			// 分页
			enventPages(val){
				this.loading = true
				this.skip = ( val.current-1) * 10 ;
				this.getData()
			},
			goUrl(url){
				uni.navigateTo({url})
			},
			// 订单状态颜色
			onStatusColor(val){
				return onStatusColor(val);
			},
			onOrderStatus(val){
				this.numList = val ;
				this.showStatusOrder = true;
			},
			// 图片放大
			eventImage(image) {
				uni.previewImage({
					urls: [image],
				});
			}
		}
	}
</script>

<style  scoped lang="scss" >
	.u-order-time{
		color:#777;
	}
	.class-manage-top{
		display: flex;
		padding:5px 20px ;
		justify-content:flex-end;
	}
	@import url("/common/css/ui-table.scss");
</style>